import React from "react";
import DatePicker from "../../../DatePicker";
import type { FieldBaseType } from "../../type";
import { isDate, isUndefined } from "@ct0/functions";
import classNames from "classnames";
import { useStyles } from "./styles";

export default function DateField({
  field,
  isValid,
  onChange,
}: {
  field: FieldBaseType<number | Date | null>;
  isValid: boolean;
  onChange: (v: number | null) => void;
}) {
  const { value: propsValue, defaultValue, disabled, placeholder } = field;
  const classes = useStyles();

  /**
   * 时间组件的值需要一个表示空的方式，并且空值需要与未设置值区分开
   * 所以
   * 使用 undefined 表示：未设置
   * 使用 null 表示：空值（已设置，但设置的是空）
   */
  const date = isUndefined(propsValue) ? defaultValue : propsValue;
  const value = isDate(date) ? date.getTime() : date ?? undefined;

  return (
    <DatePicker
      value={value}
      placeholder={placeholder}
      className={classNames(
        !isValid && classes.invalid,
        disabled && classes.disabled
      )}
      picker="date"
      onChange={onChange}
      disabled={disabled}
    />
  );
}
